import {
    Image,
    StyleProp,
    Text,
    TouchableOpacity,
    View,
    ViewStyle,
} from "react-native";
import {Ionicons} from "@expo/vector-icons";
import styles from "./RowButton.style";
import React, {ReactNode} from "react";
import {ImageResource} from "@/types/common";
import {useTheme} from "@/contexts/ThemeContext";
import {Divider} from "@rneui/themed";

interface RowButtonProps {
    text: string | ImageResource;
    icon?: any;
    style?: StyleProp<ViewStyle>;
    tailText?: string;
    tailComponent?: ReactNode;
    onPress?: () => void;
    isLast?: boolean;
}

/**
 * 行按钮组件
 * @param text
 * @param icon
 * @param tailText
 * @param onPress
 * @param style
 * @param tailComponent 尾部组件，当该选项不为空时，onPress
 * @param isLast
 * @constructor
 */
export default function RowButton({
                                      text,
                                      icon,
                                      tailText,
                                      onPress,
                                      style,
                                      tailComponent,
                                      isLast = false,
                                  }: RowButtonProps) {
    // 使用自定义主题
    const {colors} = useTheme();

    const renderLastComponent = () => {
        if (tailComponent) {
            return tailComponent;
        } else {
            if (tailText) {
                return (
                    <Text
                        numberOfLines={1}
                        ellipsizeMode="tail"
                        style={[styles.tailText, {color: colors.text.secondary}]}
                    >
                        {tailText}
                    </Text>
                );
            } else {
                return (
                    <Ionicons
                        name="chevron-forward-outline"
                        size={20}
                        color={colors.text.secondary}
                    />
                );
            }
        }
    };

    const renderIcon = () => {
        if (!icon) {
            return <></>
        }
        if (typeof icon === "string") {
            return (
                <View style={styles.iconContainer}>
                    {/*// @ts-ignore*/}
                    <Ionicons name={icon} size={22} color={colors.text.link}/>
                </View>
            );
        } else {
            return (
                <View style={styles.iconContainer}>
                    {icon}
                </View>
            );
        }
    }

    const renderRowButton = () => {
        if (onPress) {
            return (
                <TouchableOpacity onPress={onPress} activeOpacity={0.7}>
                    <View style={[styles.item, {backgroundColor: colors.background}, style]}>
                        {renderIcon()}
                        {typeof text === "string" ? (
                            <Text
                                numberOfLines={1}
                                style={[styles.text, {color: colors.text.primary}]}
                            >
                                {text}
                            </Text>
                        ) : (
                            <Image source={{uri: text.src}} style={styles.image}/>
                        )}
                        {renderLastComponent()}
                    </View>
                    {!isLast && <Divider/>}
                </TouchableOpacity>
            );
        } else {
            return (
                <>
                    <View style={[styles.item, {backgroundColor: colors.background}, style]}>
                        {icon && (
                            <View style={styles.iconContainer}>
                                <Ionicons name={icon} size={22} color={colors.text.primary}/>
                            </View>
                        )}
                        {typeof text === "string" ? (
                            <Text
                                numberOfLines={1}
                                style={[styles.text, {color: colors.text.primary}]}
                            >
                                {text}
                            </Text>
                        ) : (
                            <Image source={{uri: text.src}} style={styles.image}/>
                        )}
                        {renderLastComponent()}
                    </View>
                    {!isLast && <Divider/>}
                </>
            );
        }
    };

    return <>{renderRowButton()}</>;
}
